<template>
	<view>
		<ttBar leftIcon="icon-back" rightIcon=""></ttBar>
		<view class="regBox ">
			<text class="regTitle">商家注册</text>
			<view class="regRow">
				<text class="labelName">+86</text>
				<text class="iconfont icon-unfold"></text>
				<input type="number" placeholder="请输入手机号码" v-model="tel" maxlength="11" />
			</view>
			<view class="regRow">
				<text class="labelName">校验码</text>
				<text class="iconfont"></text>
				<input type="text" placeholder="请输入右侧校验码" v-model="imgCode" maxlength="4" />
				<image :src="imgUrl" @tap="refreshImg"></image>
			</view>
			<view class="regRow">
				<text class="labelName">验证</text>
				<text class="iconfont"></text>
				<input type="number" placeholder="请输入短信验证码" v-model="msgCode" maxlength="6" />
				<text :class="['sendBtn', isSendMsg ? 'isSend' : '']" v-text="sendText" @tap="getMsgCode"></text>
			</view>
			
			<view class="regRow">
				<text class="labelName">密码</text>
				<text class="iconfont"></text>
				<input type="text" password="true" placeholder="6-16位字母、字符含数字" v-model="userPass" maxlength="16" />
			</view>
			<view class="zcBox">
				<text class="iconfont" :class="[isAgree ? 'icon-yuanxingxuanzhongfill' : 'icon-yuanxingweixuanzhong']" @tap="agreeXy"></text>
				<text>我已阅读并同意</text>
				<text class="cl" @tap="toPage" :data-url="initInfo.privacy">《隐私政策》</text>
				<text class="cl" @tap="toPage" :data-url="initInfo.policy">《入驻协议》</text>
			</view>
			<view class="registerBtnBox"><button class="registerBtn" @tap="register">注册</button></view>
		</view>
		<updateModal ref="upModal"></updateModal>
		<downLoding></downLoding>
	</view>
</template>

<script>
import ttBar from '@/components/ttBar/ttBar.vue';
import API from '@/common/api.js';
import CFG from '@/common/config.js';
import Request from "@/sdk/pocky-request/index.js"
import downLoding from '@/components/downLoding/downLoding.vue';
import updateModal from '@/components/updateModal/updateModal.vue';
import {mapState} from "vuex";
export default {
	components: {
		ttBar,
		downLoding,
		updateModal,
	},
	computed: {
		...mapState({
			initInfo: state => state.sys.initInfo,
			pushId:state=>state.push.pushId,
			imei:state=>state.push.imei,
			userInfo:state=>state.user.userInfo
		})
	},
	data() {
		return {
			tel: '',
			msgCode: '',
			userPass: '',
			isGetMsg: false,
			sendText: '获取验证码',
			imgCode:'',
			isSendMsg: false,
			isAgree: false,
			imgUrl:CFG.baseURL+'/common/getCode.do',
			imgShow:true
		};
	},
	methods: {
		refreshImg(){
			this.imgUrl=this.imgUrl+'?t='+new Date().getTime()
		},
		getMsgCode() {
			if (!this.isSendMsg) {
				let rgx = /^1[3456789]\d{9}$/;
				if (!this.tel) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
				} else if (!rgx.test(this.tel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
				} else if(!this.imgCode){
					uni.showToast({
						title: '请输入图片校验码',
						icon: 'none'
					});
				} else{
					this.$store.dispatch("sendMsgCode",{
						phone:this.tel,
						type:'101',
						content:this.imgCode
					}).then((res)=>{
						if(res.data.code==1){
							this.isGetMsg = true; //修改状态
							let t = 60;
							this.sendText = t + "秒"
							this.isSendMsg = true;
							const itval = setInterval(() => {
								t--;
								if (t < 1) {
									t = 60;
									this.sendText = "获取验证码"
									this.isSendMsg = false;
									clearInterval(itval);
								} else {
									this.isSendMsg = true;
									this.sendText = t + "秒"
								}
							}, 1000)
						}else{			//已注册的返回登录页面
							if(res.data.code==2){
								setTimeout(()=>{
									uni.reLaunch({
										url: '../loging/loging'
									});
								},1000)
							}
							
						}
						
					})
					
				}
			} else {
				uni.showToast({
					title: '发送的间隔太短啦，请稍后再试',
					icon: 'none'
				});
			}
		},
		register() {
			let rgx = /^1[3456789]\d{9}$/;
			if (!this.tel) {
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none'
				});
			} else if (!rgx.test(this.tel)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
			} else if (!this.isGetMsg) {
				uni.showToast({
					title: '请先获取短信验证码',
					icon: 'none'
				});
			} else if (!this.msgCode) {
				uni.showToast({
					title: '请输入短信验证码',
					icon: 'none'
				});
			} else if (!this.checkPassWord()) {
			} else if (!this.isAgree) {
				uni.showToast({
					title: '请勾选同意服务协议与隐私政策',
					icon: 'none'
				});
			} else {
				this.$store.dispatch('register', {
					username: this.tel,
					password: this.userPass,
					code: this.msgCode
				})
				// #ifdef APP-PLUS
				setTimeout(()=>{
					if(this.pushId){
						this.$store.dispatch("editUserInfo",{
							userId:this.userInfo.userId,
							pushId:this.pushId,
							imei:this.imei
						})
					}
				},3000)
				// #endif
			}
		},
		//检查密码强度
		checkPassWord() {
			let psReg = /^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/;
			this.userPass = this.userPass.tailCut();
			if (!this.userPass) {
				uni.showToast({
					title: '注册密码不能为空',
					icon: 'none'
				});
				return false;
			} else if (this.userPass.length < 6) {
				uni.showToast({
					title: '密码太短',
					icon: 'none'
				});
				return false;
			} else if (psReg.test(this.userPass)) {
				uni.showToast({
					title: '密码太过简单，请至少包含字母、数字、符号中的两种',
					icon: 'none'
				});
				return false;
			} else {
				return true;
			}
		},
		agreeXy(e) {
			this.isAgree = !this.isAgree;
		},
	},
	onLoad() {
	}
};
</script>

<style lang="less">
.regBox {
	display: flex;
	flex-direction: column;
	padding-left: 40upx;
	padding-right: 40upx;

	.regTitle {
		margin-top: 40upx;
		font-size: 52rpx;
		font-weight: bold;
		color: #202932;
		padding-left: 10upx;
		margin-bottom: 40upx;
	}

	.regRow {
		display: flex;
		border-bottom: 1px solid #e7e7e7;
		padding-bottom: 30upx;
		padding-top: 58upx;
		align-items: center;

		.selectCy {
			font-size: 42rpx;
			font-weight: bold;
			color: #565866;
			width: 90upx;
			flex-shrink: 0;
		}

		.iconfont {
			width: 26upx;
			font-size: 26upx;
			margin-right: 30upx;
		}

		> input {
			font-size: 35rpx;
			flex-shrink: 1;
			flex-grow: 1;
		}

		.sendBtn {
			font-size: 28rpx;
			color: #ff7d27;
			flex-shrink: 0;
			text-align: right;
		}
		.isSend {
			color: #565866;
		}

		.labelName {
			font-size: 36rpx;
			font-weight: bold;
			color: #565866;
			width: 110upx;
			flex-shrink: 0;
		}
		image{
			width: 180upx;
			height: 60upx;
		}
	}
	.zcBox {
		margin-top: 60upx;
		font-size: 26rpx;
		color: #777777;
		display: flex;
		align-items: center;
		.iconfont {
			font-size: 36upx;
			margin-right: 8upx;
		}
		.icon-yuanxingxuanzhongfill {
			color: #f8a008;
		}
		.cl {
			color: #f8a008;
		}
	}
	.registerBtnBox {
		padding: 0 60upx;
		margin-top: 110upx;
		.registerBtn {
			width: 100%;
			height: 88upx;
			border-radius: 44upx;
			background-color: #ffb423;
			color: #ffffff;
			font-size: 34upx;
		}
		.registerBtn:after {
			border: none;
		}
	}
}
</style>
